<template>
  <div class="whl-home" @click.stop="handleShowdi">
    <div>
      <div :class="headershow?'whl-pos':''">
        <img src="../../assets/images/tongtu-touxiang.jpg" alt="" @click="goPage(1, 'my')">
        <p><span @click="goPage(1, 'my')">{{ userInfo.userName }}</span></p>
        <img src="../../assets/images/publish-cion.png" alt="" @click.stop="handleShowDropdown">
        <div class="whl-dropdown" v-show="dropDownVisible">
          <p @click="goPage(1, 'SelectStore')">切换门店</p>
          <p @click="goPage(2, 'receivingPayments')">收款</p>
          <p @click="goPage(2, 'scanCode')">扫码</p>
          <p @click="goPage(1, 'accountStatement/list')">对账单</p>
          <span></span>
        </div>
      </div>
      <div ref="headerlist">
        <div @click="goPage(2, 'receivingPayments')">
          <img src="../../assets/images/shoukuan-tb.png" alt="">
          <p>收款</p>
        </div>
        <div @click="goPage(3)">
          <img src="../../assets/images/zhangben-tb.png" alt="">
          <p>账本</p>
        </div>
        <div @click="goPage(2, 'scanCode')">
          <img src="../../assets/images/saoma-tb.png" alt="">
          <p>扫码</p>
        </div>
        <div @click="goPage(2, 'message')">
          <img src="../../assets/images/xiaoxi-tb.png" alt="">
          <p>消息</p>
        </div>
        
      </div>
    </div>
    <mt-swipe :auto="3000" class="whl-banner">
      <mt-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="" class="whl-banner-img" @click="goPage(1, item.router)">
      </mt-swipe-item>
    </mt-swipe>
    <div class="whl-menus">
      <div @click="goPage(1, 'financeChild')">
        <img src="../../assets/images/tf/gongxiangfu.png" alt="">
        <p>共享付</p>
      </div>
      <div @click="goPage(1, 'tongfuLoan')">
        <img src="../../assets/images/tf/tongfudai-tb.png" alt="">
        <p>同福贷</p>
      </div>
      <div @click="goPage(1, 'storeManage')">
        <img src="../../assets/images/tf/mendianguanli.png" alt="">
        <p>门店管理</p>
      </div>
      <div @click="goPage(2, 'receivingPayments')">
        <img src="../../assets/images/tf/shoukuanma.png" alt="">
        <p>收款码</p>
      </div>
      <!--<div>-->
      <!--  <img src="../../assets/images/jisuanka-tb.png" alt="">-->
      <!--  <p>结算卡</p>-->
      <!--</div>-->
      <!--<div @click="goPage">-->
      <!--  <img src="../../assets/images/feilvxinxi-tb.png" alt="">-->
      <!--  <p>费率信息</p>-->
      <!--</div>-->
      <div @click="goPage(3)">
        <img src="../../assets/images/tf/jiesuanka.png" alt="">
        <p>结算卡</p>
      </div>
      <div @click="goPage(3)">
        <img src="../../assets/images/tf/feilvxinxi.png" alt="">
        <p>费率信息</p>
      </div>
      <div @click="goPage(3)">
        <img src="../../assets/images/tf/jingyingfenxi.png" alt="">
        <p>经营分析</p>
      </div>
      <!-- <div @click="goPage(2, 'order')">
        <img src="../../assets/images/tf/jingyingfenxi.png" alt="">
        <p>订单详情</p>
      </div> -->
      <div @click="goPage(1, 'subsidyPolicy', {title: '补贴政策'})">
        <img src="../../assets/images/tf/butiezhengce-tb.png" alt="">
        <p>补贴政策</p>
      </div>
      <div @click="goPage(3)">
        <img src="../../assets/images/tf/feilvzhengce.png" alt="">
        <p>费率政策</p>
      </div>
      <div @click="goPage(3)">
        <img src="../../assets/images/tf/erpfenxi.png" alt="">
        <p>ERP管理</p>
      </div>
      
      
    </div>
    <div class="whl-goods">
      <div @click="goPage(1, 'tongfuLoan')">
        <h2>金融产品</h2>
        <p>更多</p>
        <img src="../../assets/images/jiantou-tb.png" alt="">
      </div>
      <div>
        <div>
          <div>
            <img src="../../assets/images/zjkyinhang-tb.png" alt="">
            <p>张家口银行</p>
          </div>
          <p>贷款额度10~30万</p>
          <p>
            <span>贷款利息不高于</span>
            <span>6.5%</span>
          </p>
          <p class="whl-tag">贷款</p>
        </div>
        <div>
          <div>
            <img src="../../assets/images/hebei-tb.png" alt="">
            <p>河北银行</p>
          </div>
          <p>贷款额度10~30万</p>
          <p>
            <span>贷款利息不高于</span>
            <span>6%</span>
          </p>
          <p class="whl-tag">贷款</p>
        </div>
        <div>
          <div>
            <img src="../../assets/images/pingan-tb.png" alt="">
            <p>平安银行</p>
          </div>
          <p>支付交易费率低至0%</p>
          <p>
            <span>每月都有现金</span>
            <span>红包领</span>
          </p>
          <p class="whl-tag whl-banka-tag">办卡</p>
        </div>
        <div>
          <div>
            <img src="../../assets/images/huaxia-tb.png" alt="">
            <p>华夏银行</p>
          </div>
          <p>支付交易费率低至0%</p>
          <p>
            <span>每月都有现金</span>
            <span>红包领</span>
          </p>
          <p class="whl-tag whl-banka-tag">办卡</p>
        </div>
      </div>
    </div>
    <div class="whl-gap"></div>
  </div>
</template>
<script>
import { Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge";
import { bannerList } from '../../js/banner';
import localStorageClient  from '../../js/localstorage'

export default {
  data() {
    return {
      popupVisible: true,
      dropDownVisible: false,
      scanClick: false,
      userInfo: {},
      bannerList,
      headershow:false
    }
  },
  mounted() {
    this.userInfo = localStorageClient.getJSON('user') ? localStorageClient.getJSON('user') : {};
    window.addEventListener("scroll",this.headerscroll,true)
  },
  methods: {
    handleShowdi() {
      if (this.dropDownVisible) {
        this.dropDownVisible = false;
      }
    },
    headerscroll() {
      let a = this.$refs.headerlist.getBoundingClientRect().top
      console.log(a);
      if (a < 95) {
        this.headershow = true;
      } else {
        this.headershow = false;
       }
    },
     async getBanner() {
      const res = await this.ajax({
        url: '',
        type: "get",
        controlLoading: false
      });
      if (res.success) {
      const data = res.resultObject;
      }
    },
    handleShowDropdown() {
      this.dropDownVisible = !this.dropDownVisible
    },
    goPage( type, path = '', query = {}) {
      if(type === 1) {
        this.$router.push(
          { path: `/${path}`, query }
        );
        this.dropDownVisible = false
      } else if (type === 2) {
        jsBridge.goNativePage({pageName: path});
        this.dropDownVisible = false
      } else {
        Toast('近期上线，敬请期待...')
      }
    },
    handleScan() {
      if (this.scanClick) return;
      this.scanClick = true;
      setTimeout(() => this.scanClick = false, 2000);
      try {
        AppUtil.call(AppUtil.APIS.SCAN, {}, (response)=> {
          if ( response && (response.success === true || response.success === "true")) {
            const url = response.resultObject;
            // this.scanRequest(url);
          } else if (response && response.code && response.code == "-10") {
            //未扫码，返回，不处理
          } else {
            Toast("扫码失败");
          }
        });
      } catch (err) {}
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.headerscroll)
  }
}
</script>

<style lang="scss">
@import "../../style/_public";

.whl-home {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: url("../../assets/images/head-bg.png") left top / cover no-repeat;
  background-size: 100vw;

  &>div:first-child {
    width: 100%;
    height: pw(266);
    position: relative;
    .whl-pos{
      position: fixed;
      background: #CC080C;
      z-index: 99;
    }
    &>div:first-child {
      width: 100vw;
      height: pw(82);
      // padding: 0 pw(15);
      @extend %box-sizing;
      display: flex;
      align-items: center;
      // padding-top: pw(40);
      padding: pw(30) pw(15) pw(10) pw(15);
      

      &>img:first-child {
        width: pw(42);
        height: pw(42);
        border-radius: 50%;
      }

      &>p {
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        font-family: 'PingFang SC', serif;
        font-size: pw(16);
        color: #fff;
        font-weight: 500;
        margin-left: pw(10);
        flex: 1;
      }

      &>img:nth-child(3) {
        width: pw(24);
        height: pw(24);
      }

      .whl-dropdown {
        width: pw(90);
        height: auto;
        border-radius: pw(4);
        background: #FFF;
        box-shadow: 0 pw(5) pw(15) 0 rgba(0, 0, 0, 0.10);
        position: absolute;
        right: pw(15);
        top: pw(85);
        z-index: 100;
        &>p {
          width: 100%;
          height: pw(43);
          border-bottom: 1px solid #EEE;
          color: #333;
          font-size: pw(14);
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &>span {
          display: block;
          width: pw(16);
          height: pw(16);
          transform: rotate(45deg) skew(20deg, 20deg);
          position: absolute;
          right: pw(5);
          top: pw(-8);
          background-color: #fff;
        }
      }
    }
    &>div:nth-child(2) {
      width: 100%;
      height: pw(65);
      display: grid;
      grid-template-rows: repeat(1, 1fr);
      grid-template-columns: repeat(4, 1fr);
      margin-top: pw(25);
      padding: 0 pw(15);
     @extend %box-sizing;
      position: absolute;
      left: 0;
      bottom: pw(99);
      &>div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        &>img {
          width: pw(40);
          height: pw(40);
        }

        &>p {
          color: #FFF;
          text-align: center;
          font-family: PingFang SC, serif;
          font-size: pw(14);
          font-style: normal;
          font-weight: 500;
          line-height: pw(18);
        }
      }
    }
  }

  .whl-banner {
    width: pw(355);
    height: pw(90);
    margin: 0 auto;
    margin-top: pw(10);
    border-radius: pw(10);

    .whl-banner-img {
      width: pw(355);
      height: pw(90);
      border-radius: pw(10);
    }

    .is-active {
      background-color: #fff !important;
    }

    .mint-swipe-indicator {
      background: #fff !important;
    }
  }

  .whl-menus {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(5, 1fr);
    margin-top: pw(15);

    &>div {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: pw(70);

      &>img {
        width: pw(40);
        height: pw(40);
      }

      &>p {
        color: #333;
        text-align: center;
        font-family: PingFang SC, serif;
        font-size: pw(12);
        font-style: normal;
        line-height: pw(16);
      }
    }
  }

  .whl-goods {
    width: pw(355);
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    background: #fff;
    border-radius: pw(10);
    padding-bottom: pw(10);
    margin-top: pw(10);

    &>div:first-child {
      width: 100%;
      height: pw(50);
      display: flex;
      align-items: center;
      padding: 0 pw(10);
      @extend %box-sizing;
      &>h2:first-child {
        display: flex;
        color: #000;
        font-family: PingFang SC, serif;
        font-size: pw(18);
        font-style: normal;
        font-weight: 500;
        align-items: center;
      }

      &>p:nth-child(2) {
        width: auto;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 1;
        color: #666;
        font-size: pw(12);
        font-style: normal;
      }

      &>img:nth-child(3) {
        width: pw(12);
        height: pw(12);
      }
    }

    &>div:nth-child(2) {
      width: 100%;
      height: auto;
      overflow: hidden;
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr);
      grid-gap: pw(10);
      padding: 0 pw(10);
      @extend %box-sizing;

      &>div {
        width: 100%;
        height: 100%;
        background-color: #FFF6F6;
        border-radius: pw(4);
        padding: pw(10);
        padding-top: 0;
        @extend %box-sizing;
        position: relative;

        &>div:first-child {
          width: 100%;
          height: pw(40);
          display: flex;
          align-items: center;

          &>img {
            width: pw(24);
            height: pw(24);
            border-radius: 50%;
          }

          &>p {
            width: auto;
            height: 100%;
            display: flex;
            align-items: center;
            flex: 1;
            color: #333;
            font-size: pw(14);
            margin-left: pw(5);
          }
        }

        &>p:nth-child(2) {
          width: 100%;
          height: pw(19);
          display: flex;
          align-items: center;
          color: #000;
          font-size: pw(12);
        }

        &>p:nth-child(3) {
          width: 100%;
          height: pw(19);
          display: flex;
          align-items: center;
          color: #000;
          font-size: pw(12);

          &>span:nth-child(2) {
            color: #F20000;
          }
        }

        .whl-tag {
          width: pw(28);
          height: pw(14);
          border-radius: 0 pw(4);
          background: linear-gradient(280deg, #F00 0%, #FF7A00 100%);
          color: #FFF;
          font-size: pw(10);
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0;
          right: 0;
          padding: 0;
        }

        .whl-banka-tag {
          background: linear-gradient(280deg, #005EEC 0%, #1EA0FF 100%);
        }
      }
    }
  }

  .whl-gap {
    width: 100%;
    height: pw(50);
  }
}</style>
